<template>
  <div>
    <h3>{{ message }}</h3>
    <BookCommentListItem
      v-for="comment in comments"
      :item="comment"
      :key="comment.id"
    />
  </div>
</template>

<script>
import BookCommentListItem from "./BookCommentListItem.vue";

export default {
  name: "BookCommentList",
  data() {
    return {
      comments: [],
      message: "",
    };
  },
  props: ["url"],
  components: {
    BookCommentListItem,
  },
  watch: {
    url: {
      immediate: true,
      handler() {
        this.createditem();
      },
    },
  },
  methods: {
    // 原本定义在create（）中的，现在重定义成一个方法，原先的组件和后续的一起使用

    createditem() {
      this.message = "";
      if (this.url !== undefined) {
        this.$route.path = this.url;
      }
      let urls = this.$route.path + "/comment";
      this.axios
        .get(urls)
        .then((response) => {
          if (response.status == 200) {
            this.comments = response.data;
            if (this.comments.length === 0) {
              this.message = "当前没有任何评论！";
            }
          }
        })
        .catch((error) => alert(error));
    },
  },
};
</script>

<style></style>
